<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomEdit('添加自动约课记录',~{::style})">
    <style>

    </style>
</head>
<body>
<div class="ch-container">
    <div class="row" style="padding-top: 10px;">
        <form class="form-horizontal">
            <div id="content" class="col-md-12 col-sm-12 col-xs-12">
<!--                <legend class="text-center" style="padding-bottom:15px;font-weight: bold;margin-left: 6%;" contenteditable="false">添加自动约课计划</legend>-->

                    <div class="form-group">
                        <div class="col-xs-3 text-right" style="min-height: 27px; padding-top: 6px;">选择学员：</div>
                        <div class="col-xs-8" style="margin-left: -15px;">
                            <input id="loginName" class="form-control" th:value="${studentLogin}" placeholder="请输入学员关键字" autocomplete="off" maxlength="30" aria-describedby="inputError2Status">
                            <input type="hidden" name="studentId" id="studentId" th:value="${studentId}"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-3 text-right" style="min-height: 27px; padding-top: 6px;">约课时间：</div>
                        <div class="col-xs-8" style="margin-left: -15px;">
                            <input class="form-control" name="classTime" id="classTime" placeholder="约课时间" onfocus="WdatePicker({minDate:'%y-%M-%d %H:{%m+5}:00',dateFmt:'yyyy-MM-dd HH:mm:00',readOnly:true,hmsMenuCfg:{H:[1,6],m:[20,3]}})" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-3 text-right" style="min-height: 27px; padding-top: 6px;">常用老师：</div>
                        <div class="col-xs-8 radio" style="margin-left: -15px;">
                            <label><input type="radio" name="common" style="zoom: 120%;margin-top: 2px;" value="1"/>是</label>
                            <label style="margin-left: 20px;"><input type="radio" name="common" style="zoom: 120%;margin-top: 2px;" value="0" checked/>否</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-3 text-right" style="min-height: 27px; padding-top: 6px;">约课订单：</div>
                        <div class="col-xs-9 radio" id="orderList">
                            <div class="form-group" style="margin-bottom: 5px;">
                            <label><input type="radio" name="orderId" disabled style="zoom: 120%;margin-top: 2px;" title="铂金年套餐"/>铂金年套餐</label>
                            </div>
                            <div class="form-group">
                            <label><input type="radio" name="orderId" disabled style="zoom: 120%;margin-top: 2px;" title="铂金年套餐"/>铂金年套餐</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: 20px;">
                            <span class="col-xs-6 text-right">
                                <a class="btn btn-default" onclick="layerClose();"><span>关 闭</span></a>
                            </span>
                        <span class="col-xs-6 text-left">
                                <a class="btn btn-primary" onclick="confirmSubmit();"><span>提 交</span></a>
                            </span>
                    </div>
            </div>
        </form>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomEdit(~{::script})">
    <script type="text/javascript">
        creatSearchDiv("loginName", "studentId", "/et/search/person/list", 26, 0, function(){
            getTokenString();
        });
        // 初始化
        $(document).ready(function(){

        });

        function getTokenString() {
            let studentId=$.trim($("#studentId").val());
            if (studentId===""){
                //layer.msg("没有找到学员信息",{icon:2});
                return false;
            }
            let url="/class/token/"+studentId;
            $.post(url,{},function (result){
                if (result.status===1){
                    getOrderList(result.tokenString);
                }

            },"json");
        }

        function getOrderList(tokenString) {
            let orderlistObj=$('#orderList');
            let layerIdx=layer.load()
            let params = {
                tokenString: tokenString
            }
            let bookedUrl="[[${bookedUrl}]]";
            $.ajax({
                url: bookedUrl+"/course/booking/order",
                type: 'post',
                data: params,
                success: function (data) {
                    layer.close(layerIdx);
                    if (data.status === 1) {
                        orderlistObj.empty();
                        data.data.forEach(function (item, i) {
                            var orderitem = '<div class="form-group" style="margin-bottom: 5px;">'
                            orderitem += '<label><input type="radio" name="orderId" value="'+item.id+'" style="zoom: 120%;margin-top: 3px;">'
                            orderitem += '<strong>'+item.packageName+'</strong><br>'+item.materialCnName+'|'+item.materialEnName+'</label>'
                            orderitem += '</div>'
                            orderlistObj.append(orderitem)
                        })
                        if (orderlistObj.find('label').length === 1) {
                            orderlistObj.find('label')[0].click()
                        }
                    } else {
                        orderlistObj.append('<p class="form-control-static"><strong>无有效套餐</strong></p>')
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }

        /**
         * 检查表单数据合法性
         */
        function validFormData() {
            if ($("#studentId").val()===""){
                if ($.trim($("#loginName").val())===""){
                    layer.tips("请选择学员！","#loginName",{tips: [1, '#c00']});
                    $("#loginName").val("");
                }else {
                    layer.tips("请重新选择学员！","#loginName",{tips: [1, '#c00']});
                    //$("#loginName").val("");
                }
                return false;
            }
            if ($("#classTime").val()==="" || $("#classTime").val().length!==19){
                layer.tips("请输入正确的上课时间","#classTime",{tips: [1, '#c00']});
                return false;
            }
            if ($("input[name='orderId']:checked").length===0){
                layer.tips("请选择约课订单！","#orderList",{tips: [1, '#c00']});
                return false;
            }
            return true;
        }

        /**
         * 询问是否确定提交数据
         */
        function confirmSubmit() {
            if (!validFormData()){
                return false;
            }
            layer.confirm('您是否确认添加此自动约课计划？', {
                btn: ['确定','再考虑'] //按钮
            }, function(){
                sub();
            }, function(){

            });
        }

        /**
         * 提交数据
         */
        function sub() {
            if (!validFormData()){
                return false;
            }
            let url="/class/booking/auto/add";
            let params = $("form").serialize()
            $.post(url,params,function (result){
                if (result.status===1){
                    layer.msg("添加约课计划成功",{icon:1},function () {
                        window.location.reload(true);
                    })
                }else {
                    layer.msg("添加约课计划失败："+result.errMsg,{icon:2});
                }
            },"json")
        }

        function layerClose(){
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            // parent.layer.close(index); //再执行关闭
            parent.layer.close(index);
        }

    </script>
</div>
</body>
</html>
